
// 1. 
//    react   16/18  
//    react-dom/client     18    createRoot 
//    javascript/XML  babel-preset-react 处理jsx 
// 2.  
// react.js   react 核心文件  包含了react diff 算法 虚拟DOM 模型 react事件机制  fiber 机制(16)
// 提供创建组件的API  createClass Component  React.Component 

// react-dom.js         封装了操作react 组件API  负责把虚拟DOM 渲染 render 成真实DOM
// ReactDOM.render()=17    createRoot.render=18 

// 3.  babel-preset-react 负责解析 jsx 代码 ,  js内的html代码解析出来返回给浏览器

// 4. 
//  ReactDOM.render(虚拟DOM,真实DOM)
//  ReactDOM.render(<Component/>,app);  16版本 
//  React.createElement()   创建虚拟DOM 
//  createRoot().render()    18版本 


// 5. data-reactroot 表面当前元素是 该组件的顶层标签 
// 任何组件都只能有一个顶层标签  组件首字母必须大写

// 6. jsx 语法规则 
// 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；
// 遇到代码块（以 { 开头），就用 JavaScript 规则解析

// 7. 注释   组件内部注释  
//  { /* <h1>{txt}</h1>  */ }




// 创建组件  component 

// 组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分

// 每个组件 能完成独立的功能的，都是独立的部分
// a. React.createClass   老版本   ES5  废弃  react@15  
// b. React.Component   新版本   ES6   class 类  extends 继承  React.Component 父类 
// c. 无状态组件    stateLess component   函数式组件   Hooks 

// 组件名首字母必须大写    任何组件都只有一个顶层标签  

// render 组件生命周期钩子函数   把虚拟DOM 读取出JS内存   然后等待渲染成真实DOM 

// 生命周期阶段  mount(载入)  update(更新) unmount(销毁)

// 自定义函数  handleClick  onClick={this.handleClick}

// 数据传递载体  组件通信  props(属性)   state(状态)=data

// 内联CSS 


export default class MyCpt extends React.Component{
    render(){
        return (
            <div>
                <h2>MyCpt - 组件的定义和规则 </h2>
                <h4>组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分</h4>
                <MyOne></MyOne>
            </div>
        )
    }
}

class MyOne extends Component{
    render(){
        return (
           <div>
                <div>
                    <h2>MyOne - MyOne -  Myone </h2>
                </div>
                <div>
                    <h2>MyOne - MyOne -  Myone </h2>
                </div>
                {/* <div>
                    <h2>MyOne - MyOne -  Myone </h2>
                </div> */}

                <MyFirst></MyFirst>
           </div>
        )
    }
}

class MyFirst extends Component{
    render(){
        return (
            <div>
                <h2> react is so easy </h2>
                <MyLikes></MyLikes>
            </div>
        )
    }
}

function MyLikes(){
    return (
        <div>
            <h2>我的点赞页面 </h2>
            <MyLove></MyLove>
        </div>
    )
}

const MyLove = ()=>{
    return (
        <div>
            <h2>我的收藏 </h2>
            <Span></Span>
        </div>
    )
}

const Span = ()=>{
    return (
        <div>
            <h2> 测试 span - span - span </h2>
            <MyText></MyText>
        </div>
    )
}

// React 实现 v-if 和 v-for 
const flag = true;
class MyText extends Component{
    render(){
        return (
            <div>
                <h2> React 实现 v-if 和 v-for  </h2>
                {
                    flag? <h2>周五一起去钓鱼...</h2> : <h2>周五一起去吃烤肉....</h2>
                }
                {
                    flag && <div>周末周六不上课哦???真的吗？？？？</div>
                }
                {
                    // flag ?? <h2>WH2217 - 不要睡觉了哦啊。。。。</h2>
                }
                <MyList></MyList>
            </div>
        )
    }
}

const arr = ["Vue2","Vue3","Node","Webpack","Vite","Vuex","Pinia"]
class MyList extends Component{
    render(){
        return (
            <div>
                <h2> MyList - MyList - MyList</h2>
                {
                    arr 
                }
                {
                    arr.map((item,index)=>{
                        return (
                            <h1 key={index}  >{item} - {index} </h1>
                        )
                    })
                }
            </div>
        )
    }
}